<template>
  <div class="background full-background">
    <div class="contain">
      <!--账号-->
      <div class="head-box">
        <source-display-guide-bar :search-visible="false" :guide-visible="false"/>
      </div>
      <!--导航条-->
      <div class="guide-bar">
        <div class="title-box">
          <div
              class="title-item"
              :class="item.class"
              v-for="(item, index) in guideList"
              :key="index"
              @click="onChangeGuideItem(item, index)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>

      <div class="content-view-box">
        <!--导航定位器-->
        <div class="guide-position-box">
          <guide-position class="guide-position-item" :local-name="curItem.title"/>
        </div>
        <!--内容展示视口-->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import GuidePosition from "@/components/FunctionComponent/GuidePosition";
import SourceDisplayGuideBar from "@/components/SourceDisplayGuideBar";
import {getTopicChild} from "../../api/CommonApi";

const INDEX_ITEM = {
  title: '首页',
  path: '/'
};
//栏目code
const PATHLIST = [
  "/ResourceGuides",  //首页
  "/ResourceGuides/LocalHistory",  //地方志
  "/ResourceGuides/LocalNewspaper", //本地报纸
  "/ResourceGuides/VideoLecture",  //视频讲座
  "/ResourceGuides/ExcellentBooks",  //精品图书
  "/ResourceGuides/DigitalJournal", //电子期刊
  "/DigitalResources",  //数字资源
  "/ServiceGuide",  //服务指南
  "/AboutUs"   //关于我们
];
export default {
  name: "SourceDisplayTemplate",
  components: {
    SourceDisplayGuideBar,
    GuidePosition
  },
  data() {
    return {
      // 导航栏列表
      guides: [],
      //栏目code
      pathList: PATHLIST,
      // curItem:{}
    }
  },
  computed: {
    curItem(){
      const path = this.$route.path
      const list = [...this.guides]
      for (let i = 0; i < list.length; i++) {
        list[i].class = {}
        list[i].path = this.pathList[i]
        // 判断当前所在的栏目
        if (list[i].path === path) {
          return   list[i]
        }
      }
      return {}
    },
    // 计算属性,导航栏列表
    guideList() {
      const path = this.$route.path
      const list = [...this.guides]
      for (let i = 0; i < list.length; i++) {
        list[i].class = {}
        list[i].path = this.pathList[i]
        // 判断当前所在的栏目
        if (list[i].path === path) {
          const itemCode = list[i].code
          list[i].class = {
            active: true,
          }
          list[i].class[itemCode] = itemCode
        }

      }
      return list
    }
  },
  created() {
    //加载栏目数据
    this.loadMainGuiderData("cd")

  },
  methods: {
    // 加载导航栏数据
    loadMainGuiderData(topicCode) {
      console.log('loadMainGuiderData')
      getTopicChild(topicCode).then(res => {
        console.log(res)
        const result = res.result || []
        console.log("res = ", res)
        // 填充首页
        result.unshift(INDEX_ITEM)
        this.guides = result
        console.log(" this.guides = ", this.guides);

      }).catch(err => {
        console.log(err)
      })
    },
    onChangeGuideItem(item, index) {
      console.log(item)
        if(item.path === '/ResourceGuides/ExcellentBooks'){
            window.location.href="http://www.sslibrary.com/"
        }else{
            if (item.path && item.path !== this.$route.path)
                if (item.path === '/ResourceGuides') {
                    // console.log(item)
                    this.$router.push({name: 'home', path: '/'})
                } else {
                    this.$router.push({path: this.pathList[index], query: {code: item.code}})
                    // this.curItem = item
                }
            console.log("this.guideList = ", this.guideList)
        }

    }

  }

}
</script>

<style lang="less" scoped>
@import "../../assets/global.less";
//phone
@media only screen and (max-width: 576px) {
  @max-width: 100vw;
  .background {
    background-image: url("../../assets/PC-BackgroundImage/HomeBackground.png");

    .contain {
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: auto;
      //账号
      .head-box {
        @head-height: 40vw;
        width: @max-width;
        height: @head-height;
        background-image: url("../../assets/PC-BackgroundImage/banner.png");
        background-size: @max-width @head-height;
        background-repeat: no-repeat;
        background-position-x: center;
      }

      //导航栏
      .guide-bar {
        width: @max-width;
        min-height: 10vw;
        background-color: rgba(15, 121, 205, 1);
        display: flex;

        .title-box {
          width: calc(@max-width - 2vw);
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
          margin: auto;

          .title-item {
            border: none;
            background-color: rgba(15, 121, 205, 1);
            color: white;
            width: 16vw;
            height: 10vw;
            line-height: 10vw;
            font-size: 1vw;
            text-align: center;
            padding: 0 0.1vw;
            .line-ellipsis(1);

            &:hover {
              background-color: rgba(126, 206, 244, 1);
            }

            &.active {
              background-color: rgba(126, 206, 244, 1)
            }
          }
        }

      }
      @width:100vw;
      @height:50vh;
      //内容展示视口
      .content-view-box {
        //导航定位器
        .guide-position-box{
          width:@width;
          min-height:8vw;
          display: flex;
          align-items: flex-end;
          background-color:white;
          .guide-position-item{
            margin-left: 2vw;
            min-height:5vw;
          }
        }
      }
    }

  }

}


//pc
@media only screen and(min-width: 576px) {
  @max-width: 100vw;
  .background {
    background-image: url("../../assets/PC-BackgroundImage/HomeBackground.png");

    .contain {
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: auto;
      //账号
      .head-box {
        @head-height: 310px;
        width: @max-width;
        height: @head-height;
        background-image: url("../../assets/PC-BackgroundImage/banner.png");
        background-size: @max-width @head-height;
        background-repeat: no-repeat;
        background-position-x: center;
      }

      //导航栏
      .guide-bar {
        width: @max-width;
        min-height: 50px;
        background-color: rgba(15, 121, 205, 1);
        display: flex;

        .title-box {
          width: calc(@max-width - 400px);
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          margin: auto;

          .title-item {
            border: none;
            background-color: rgba(15, 121, 205, 1);
            color: white;
            width: 90px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
            padding: 0 5px;
            cursor: pointer;
            .line-ellipsis(1);

            &:hover {
              background-color: rgba(126, 206, 244, 1);
            }

            &.active {
              background-color: rgba(126, 206, 244, 1)
            }

          }
        }

      }
      @max-width:100vw;
      @min-width:900px;
      @min-height:750px;
      //内容展示视口
      .content-view-box {
        //导航定位器
        .guide-position-box{
          width:@max-width;
          height:30px;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          background-color:white;
          .guide-position-item{
            width:1200px;
          }
        }
      }
    }
  }

}

.active {
  background-color: rgba(126, 206, 244, 1)
}
</style>
